<template>
  <view class="flex-col page">
	
	<view style="background-color: white; width: 100%;">
	</view>
	<uni-nav-bar color="#000" right-icon="checkmarkempty" @clickRight="next()" left-icon="left" @clickLeft="navBack()" title="修改房间名称"/>
	<!-- navTo('/pages/roomsguanli/roomsguanli') -->
    <view class="flex-col justify-start flex-auto group_2">
      <view class="flex-row justify-between items-center section">
        <input class="text_2" type="text" v-model="inputValue" placeholder="请输入修改后的房间名称"/>
        <view class="text_3" @click="clearInput">×</view>
      </view>
	  <!-- 分割线 -->
	  <hr class="divider">
    </view>
	<view>
		<view class="min-title">推荐房间名称</view>
		<view v-for="(item,index) in roomList">
			<view :class="`recommend-room ${index}`" @click="input(item)">{{item}}</view>
			
		</view>
		
	</view>
  </view>
</template>

<script>
  import {
  		mapState,
  		mapMutations
  	} from 'vuex';
  	import SeniorTable from '@/components/data-table/senior-table.vue'
	//新增房间接口
	import { _modifyrooms } from '@/service/room.js'
  	
  export default {
    components: {
  		SeniorTable
  	},
    data() {
      return {
		  inputValue: '',
		  serialnum_room:'',
		  account_user: '',
		  name_room: '',
		  roomList:['加热房','冷冻房','离心房','基础实验房','应用实验房','教学实验房','综合实验房']
	  };
    },
	onLoad(options) {
		if (options.roomName) {
			this.inputValue = options.roomName;
		}
		if (options.roomSerialnum) {
			this.serialnum_room = options.roomSerialnum;
		}
		
		try {
			const value = uni.getStorageSync('userInfo');
			if (value != null) {
				this.account_user = value.accountNum;
			}
		} catch (e) {
			console.error(e);
		}
	},
    methods: {
		clearInput() {
		      this.inputValue = ''
		    },
		input(item) {
			this.inputValue = item;
		},
		//判断是否输入为空
		validIsEmpty (str, tip) {
			if (str === '') {
				this.$api.msg(`${tip}不能为空`);
				return false;
			}
			return true;
		},
		
		async next(){
		  try {
		    let isValid = this.validIsEmpty(this.inputValue, "房间名");
		    if (isValid) {
		      let data = {
		        serialnum_room: this.serialnum_room,
		        name_room: this.inputValue,
		      };
		      let res = await _modifyrooms(data);
		      if (res.flag == true) {
		        uni.navigateBack({
				  delta: 2 // Navigate back two pages to return to roomsguanli
				});
		      } else {
		        this.$api.msg(res.message || '修改失败');
		      }
		    }
		  } catch(e) {
		    console.error(e);
		    this.$api.msg('网络异常');
		  }
		},
		navBack(){
			uni.navigateBack();
		},
	},
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
   }
    .group_2 {
      padding: 60rpx 0;
      overflow-y: auto;
	  align-items: center;
	  }
    .section {
	  display: flex;	
	  border-radius: 20rpx;
      width: 85%;
      padding: 29.17rpx 25rpx 29.17rpx 29.17rpx;
      background-color: #d3d3d34d;
	  align-items: center;
	}
	.divider {
		margin-top: 40rpx;
		width: 85%;
		background-color: #f1f1f1;
		opacity: 0.2;
	}
	.min-title {
		font-size: 25rpx;
		margin-left: 7.5%;
		//line-height: 0px;
		color: #8a8a8a;
	}
	.recommend-room {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		font-size: 35rpx;
		margin-left: 7.5%;
	}
	.text_3 {
		font-size: 40rpx;
		display: contents;
		line-height: 0px;
		color: #8a8a8a;
	}
    .font_2 {
      font-size: 35.42rpx;
      font-family: SourceHanSansCN;
      font-weight: 700;
    }
    .text_5 {
      color: #38383866;
      line-height: 33.33rpx;
	 
    }
    .text_6 {
      color: #38383880;
	  font-family: SourceHanSansCN;
	  font-weight: 700;
	  line-height: 60.92rpx;
    }
    .text_2{
	  width: 80%;
	}
    
  
</style>